<template>
	<view class="land-detail">
		<headerNav></headerNav>
		<common-page>
			<common-swiper :list="list"></common-swiper>
			<common-content-wrapper v-if="info">
				<round-card>
					<common-content>
						<view class="mt-3 flex justify-between">
							<view class="title">
								<view>
									<text>{{ info.name }}</text>
								</view>
								<view><!-- <text>正南向115平米</text> --></view>
							</view>
							<common-share></common-share>
						</view>

						<view class="flex justify-between mt-6">
							<view v-for="item in mainIntros" :key="item.title">
								<view class="text-red">{{ item.intro }}</view>
								<view class="text-base text-gray">{{ item.title }}</view>
							</view>
						</view>

						<view class="specification-grid mt-3">
							<view class="mt-2" v-for="item in extraIntros" :key="item.title">
								<text class="text-gray text-base">{{ item.title }}：</text>
								<text class="text-base">{{ item.intro }}</text>
							</view>
						</view>

						<!-- 项目介绍 -->
						<view class="text-center mt-6 text-white bg-yellow-1 py-1 text-base">项目介绍</view>
						<view class="text-gray-light mt-3 text-sm">
							<text>{{ info.describe }}</text>
							<rich-text :nodes="info.content"></rich-text>
						</view>
					</common-content>
				</round-card>
			</common-content-wrapper>
		</common-page>
	</view>
</template>

<script>
import detailMixin from '@/mixins/common-detail-mixin.js'
import headerNav from '@/components/layout/headerNav.vue'
export default {
	mixins: [detailMixin],
	components: {
		headerNav
	},
	computed: {
		mainIntros() {
			if (this.info && this.info.specification) {
				return this.info.specification.filter(item => item.state === '1')
			}
			return []
		},
		extraIntros() {
			if (this.info && this.info.specification) {
				return this.info.specification.filter(item => !item.state)
			}
			return []
		}
	}
}
</script>

<style lang="scss" scoped>
.land-detail {
	.content {
		padding: 0 32rpx;
	}
	.title {
		width: 50%;
		font-size: 40rpx;
	}

	.number-sub {
		font-size: 10px;
		vertical-align: text-top;
	}

	.specification-grid {
		display: grid;
		// grid-column: auto auto;
		grid-template-columns: auto auto;
	}
}
</style>
